<template>
	<view class="wrap">
		<view class="search">
			<form action="/">
			 <van-search  maxlength="10"  v-model="searval" :clearable="false"
			    :show-action="true"  placeholder="输入医师或科室"  @search="onSearch"
			    @cancel="onCancel"  />
			</form>
		</view>
		<!-- 热门搜索 -->
		<view class="hot-search">
			<view class="hot"> 热门搜索 </view>
			<view class="item-wrap">
				<view class="item" v-for="item in searchItem">
					<u-tag :text="item.title" type="warning" plain size="large"
						icon="../../static/searchimg/hot.png"></u-tag>
				</view>
			</view>
		</view>
		<view class="recommend">
			<van-divider :style="{ color: '#c7c5c8', borderColor: '#c7c5c8', 
			padding: '0 16px' }">为您推荐名医</van-divider>
		</view>
		<!-- 推荐名医 -->
		<view class="suggestdoctor">
			<view class="doctor-item" v-for="(item,index) in doctorList" :key="index">
				<image class="doctor-img" :src="item.img"></image>
				<view class="doctor-name">{{item.name}}</view>
				<text class="major">职称:{{item.major}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	let searchItem = ref([{
			title: '神经内科'
		},
		{
			title: '消化内科病区门诊'
		},
		{
			title: '皮肤科'
		},
		{
			title: '呼吸内科'
		},
		{
			title: '口腔科门诊'
		},
		{
			title: '眼科'
		},
		{
			title: '儿科'
		}
	])
	let doctorList = ref([{
			img: '../../static/tabicon/logo.png',
			name: '高彩铃',
			id: '23456789',
			major: '骨科'
		},
		{
			img: '../../static/tabicon/logo.png',
			name: '高彩铃',
			id: '23456789',
			major: '骨科'
		},
		{
			img: '../../static/tabicon/logo.png',
			name: '高彩铃',
			id: '23456789',
			major: '骨科'
		}
	])
	let searval =ref('')

	function onSearch(val) {
		// 形参就是输入框的值,发送请求,得到该内容对应的医生或科室
		// 创建一个包含汉字‘科’的字符串 
		// const str = '这是一段包含“科”的文本'; 
		// 使用正则表达式进行匹配 
		// const regex = /[\u4e00-\u9fa5]+科[\u4e00-\u9fa5]*/; 
		// const result = val.match(regex); // 输出匹配结果 console.log(result); // ["科"]
		if(val.includes('科') || val.includes('科室')){
			uni.navigateTo({
				url: '/views/departmentlist/departmentlist?val=' +val
			});
		}
	}
	function onCancel(){
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.wrap {
		border: 1px solid transparent;
		box-sizing: border-box;
	}

	.hot-search {
		margin: 10px;
	}

	.item-wrap {
		width: 100%;
		border: 1px solid transparent;
		box-sizing: border-box;
		padding: 10px 5px;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
	}

	.item {
		margin: 5px 3px;
		border-radius: 5px;
		overflow: hidden;
	}

	.suggestdoctor {
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-around;
	}

	.doctor-item {
		width: 150px;
		height: 180px;
		padding: 20px 0;
		box-sizing: border-box;
		border-radius: 10px;
		margin: 12px;
		background-color: #acdbfb;
		display: flex;
		flex-direction: column;
		// justify-content: space-evenly;
		align-items: center;
	}

	.doctor-item>.doctor-img {
		width: 100px;
		height: 100px;
	}

	.doctor-name {
		margin: 3px 0;
	}
</style>